<template>
    <div>
        <!-- 资源管理页面 -->
        <Card>
            <p slot="title" class="card-title">
                <Icon type="home"></Icon>
                <span>资源管理</span>
            </p>
            <div>
                <template>
                    <Row>
                        <Col span="15" class="margin-bottom-10">
                            <Button type="info" @click="openAddModal(null)">
                                <Icon type="ios-medkit-outline"></Icon>&nbsp;添加资源
                            </Button>
                            <Button :disabled="setting.loading" type="success" @click="getData">
                                <Icon type="ios-refresh"></Icon>&nbsp;刷新数据
                            </Button>
                            <Button type="primary" @click="exportData(1)">
                                <Icon type="ios-download-outline"></Icon>&nbsp;导出表格
                            </Button>
                        </Col>

                        <Col span="9">
                            <Input v-model="search.value" placeholder="请输入您想要搜索的内容..." class="margin-bottom-10">
                            <Button slot="append" icon="ios-search" @click="search"></Button>
                            </Input>
                        </Col>
                    </Row>
                    <Table ref="table" class="margin-bottom-10" :columns="columns"
                           :loading="setting.loading" :border="setting.showBorder" :data="datas.content">
                    </Table>
                    <Page :total="datas.totalElements" class="tr" @on-change="pageChange" :current.sync="datas.number+1"
                          :page-size="datas.size"
                          @on-page-size-change="pageSizeChange" show-elevator show-sizer></Page>
                </template>
            </div>
        </Card>

        <!-- 添加资源 || 更新资源 -->
        <Modal v-model="modal.show" :title="modal.type==1 ? '添加资源':'更新资源'"
               @on-ok="modalOk"
               :mask-closable="false">
            <Form :model="modal.data" :label-width="80">
                <FormItem v-if="modal.type==2" label="ID">
                    <Input disabled :value="modal.data.pid"></Input>
                </FormItem>
                <FormItem label="名称">
                    <Input v-model.trim="modal.data.name"></Input>
                </FormItem>
                <FormItem label="资源链接">
                    <Input v-model.trim="modal.data.url"></Input>
                </FormItem>
            </Form>
        </Modal>

        <!-- 删除 -->
        <Modal v-model="removeModal" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>提示</span>
            </p>
            <div style="text-align:center">
                <p>此操作为不可逆操作，是否确认删除？</p>
                菜单名:{{removeObject.name}}<br>
                路径:{{removeObject.url}}
            </div>
            <div slot="footer">
                <Button type="error" size="large" long @click="remove(removeObject.pid)">确认删除</Button>
            </div>
        </Modal>


    </div>
</template>
<script>
    import {post, get} from '../../../libs/request'
    import util from '../../../libs/util'

    export default {
        data() {
            return {
                // 搜索
                search: {
                    type: 'name',
                    value: ''
                },
                // 是否开启删除的变量
                removeModal: false,
                // 进度条属性
                setting: {
                    loading: true,
                    showBorder: true
                },
                // 表格数据
                datas: {},
                dataFilter: {
                    page: 1,
                    pageSize: 10
                },
                // 表格数据属性
                columns: [
                    {title: 'ID', key: 'pid', sortable: true},
                    {title: '菜单名', key: 'name', sortable: true},
                    {title: '路径', key: 'url', sortable: true},
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {type: 'primary', size: 'small'},
                                    style: {marginRight: '5px'},
                                    on: {
                                        click: () => {
                                            this.openAddModal(params.row, 'update')
                                        }
                                    }
                                }, '修改资源'),
                                h('Button', {
                                    props: {type: 'error', size: 'small'},
                                    on: {
                                        click: () => {
                                            this.removeModalOpen(params.row)
                                        }
                                    }
                                }, '删除资源')
                            ]);
                        }
                    }
                ],
                // 添加|修改时使用
                modal: {
                    show: false,
                    type: 1,
                    data: {
                        pid: '',
                        name: '',
                        url: '',
                    }
                },
                // 删除的对象（传参对象）
                removeObject: {
                    name: '',
                    pid: '',
                    url: ''
                }
            }
        },
        created() {
            this.getData();
        },
        methods: {
            pageChange(p) {
                this.dataFilter.page = p;
                this.getData();
            },
            pageSizeChange(p) {
                this.dataFilter.pageSize = p;
                this.getData();
            },

            /**
             * 获取权限菜单
             * @returns {Promise<void>}
             */
            async getData() {
                this.setting.loading = true;
                try {
                    let res = await post('/permission/list', {
                        page: this.dataFilter.page - 1,
                        pagesize: this.dataFilter.pageSize
                    });
                    this.datas = res.data;
                } catch (error) {
                    console.log(error)
                }
                this.setting.loading = false;
            },

            /**
             * 打开添加/修改页面
             * 2： 修改
             * 1：添加
             * @param parent
             */
            openAddModal(obj, type) {
                this.modal.show = true;
                if (type == 'update' || obj != null) {
                    this.modal.data = obj;
                    this.modal.type = 2;
                } else {
                    this.modal.data.pid = '';
                    this.modal.data.name = '';
                    this.modal.data.url = '';
                    this.modal.type = 1;
                }
            },

            /**
             * 判断是添加还是修改
             */
            modalOk() {
                this.modal.show = false;
                if (this.modal.type == 1) {
                    this.addOK();
                } else {
                    this.editOk();
                }
            },


            /**
             * 添加
             * @returns {Promise<void>}
             */
            async addOK() {
                this.$Message.loading({
                    content: "资源添加中...",
                    duration: 0
                })
                try {
                    await post('/permission/add', {
                        pid: util.uuid(),
                        name: this.modal.data.name,
                        url: this.modal.data.url
                    })
                    this.getData(false);
                    this.$Message.destroy();
                    this.$Message.success({
                        content: "资源添加成功",
                        duration: 1.5
                    });
                } catch (error) {
                    console.log(error)
                }
            },

            /**
             * 修改
             * @returns {Promise<void>}
             */
            async editOk() {
                this.$Message.loading({
                    content: "资源更新中...",
                    duration: 0
                });
                try {
                    await post('/permission/update', this.modal.data)
                    this.getData(false);
                    this.$Message.destroy();
                    this.$Message.success({
                        content: "资源更新成功",
                        duration: 1.5
                    });
                } catch (error) {
                    console.log(error)
                }
            },

            /**
             * 开启删除页面
             * @param id
             */
            removeModalOpen(removeObject) {
                this.removeModal = true;
                this.removeObject = removeObject;
                console.log(removeObject)
            },

            /**
             * 资源删除
             * @returns {Promise<void>}
             */
            async remove(pid) {
                this.removeModal = false;
                this.setting.loading = true;
                this.$Message.loading({
                    content: "资源删除中...",
                    duration: 0
                });
                try {
                    await get('/permission/remove',{
                        "pid": pid
                    });
                    this.getData();
                    this.$Message.destroy();
                    this.$Message.success({
                        content: "资源删除成功",
                        duration: 1.5
                    });
                } catch (error) {
                    console.log(error)
                }
                this.setting.loading = false;
                this.removeModal = false;
            },


            /**
             * 修改
             * @param row
             */
            edit(row) {
                this.modal.type = 2;
                this.modal.data = {
                    id: row.id,
                    name: row.name,
                    type: row.type, //1-菜单 2-按钮
                    url: row.url,
                    permission: row.permission,
                    icon: row.icon,
                    sort: row.sort,
                    color: row.color == '' ? '#19BE6B' : row.color,
                    verification: row.verification == null ? 'true' : row.verification == true ? 'true' : 'false',
                }
                this.modal.show = true;
            },

            /**
             * 数据导出
             * @param type
             */
            exportData(type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: '权限数据-' + new Date().getTime(),
                        columns: this.columns.filter((col, index) => index > 1 && index < this.columns.length - 1),
                        data: this.datas.content
                    });
                }
            },
        }
    }
</script>
